<template>
	<div class="p-6 space-y-6">

		<el-tabs v-model="activeTab">
			<el-tab-pane label="供应商报价" name="quote">
				<el-table :data="supplierQuotes" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="supplier" label="供应商" />
					<el-table-column prop="product" label="产品" />
					<el-table-column prop="price" label="报价" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="价格管理" name="price">
				<el-table :data="priceList" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="supplier" label="供应商" />
					<el-table-column prop="product" label="产品" />
					<el-table-column prop="price" label="价格" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="阶梯价格管理" name="ladder">
				<el-table :data="ladderPrices" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="supplier" label="供应商" />
					<el-table-column prop="product" label="产品" />
					<el-table-column prop="quantity" label="起订量" />
					<el-table-column prop="price" label="阶梯价格" />
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('quote')

const suppliers = ['ABC电子', '恒信科技', '华南材料', '国泰化工', '晶源电子']
const products = ['EUV光刻胶', 'G线光刻胶', '氧化硅抛光液', '蚀刻液', '去胶剂']

const supplierQuotes = ref(Array.from({ length: 10 }).map(() => ({
	supplier: suppliers[Math.floor(Math.random() * suppliers.length)],
	product: products[Math.floor(Math.random() * products.length)],
	price: (Math.random() * 3000 + 500).toFixed(2)
})))

const priceList = ref(Array.from({ length: 10 }).map(() => ({
	supplier: suppliers[Math.floor(Math.random() * suppliers.length)],
	product: products[Math.floor(Math.random() * products.length)],
	price: (Math.random() * 3000 + 500).toFixed(2)
})))

const ladderPrices = ref(Array.from({ length: 10 }).map(() => ({
	supplier: suppliers[Math.floor(Math.random() * suppliers.length)],
	product: products[Math.floor(Math.random() * products.length)],
	quantity: Math.floor(Math.random() * 100) + 10,
	price: (Math.random() * 3000 + 500).toFixed(2)
})))
</script>

<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
